<template>
    <div class="random">
        <div class="logo"><img :src="eat" draggable="false" /></div>
        <div id="wrapper">
            <h1 style="color: #ff9733" id="what">{{ selectedFood }}</h1>
            <a-button shape="round" class="button" @click="toggle">{{ buttonText }}</a-button>
        </div>
        <div ref="floatContainer" class="float-container"></div>
    </div>
</template>

<script setup lang="ts">
import eat from "@/assets/eat.png"
import { ref, onMounted, onBeforeUnmount } from 'vue'

const selectedFood = ref('')
const buttonText = ref('开始')
let run = ref(false)
let timer: number | null = null
const floatContainer = ref<HTMLElement | null>(null)
const foods = ref(['炸酱面', '兰州拉面', '速冻水饺', '麦当劳', '炒年糕', '麻辣烫', '快餐', '西餐', '涮羊肉', '东南亚菜']);

const toggle = () => {
    const list = foods.value;

    if (!run.value) {
        buttonText.value = '停止'
        timer = window.setInterval(() => {
            const index = Math.floor(Math.random() * list.length)
            const food = list[index]
            selectedFood.value = food

            const temp = document.createElement('span')
            temp.className = 'temp'
            temp.innerHTML = food

            const rTop = Math.random() * (document.documentElement.clientHeight)
            const rLeft = Math.random() * (document.documentElement.clientWidth)
            const rSize = Math.random() * (37 - 14) + 14
            const rColor = `rgba(0,0,0,${Math.random().toFixed(2)})`

            Object.assign(temp.style, {
                position: 'absolute',
                top: `${rTop}px`,
                left: `${rLeft}px`,
                fontSize: `${rSize}px`,
                color: rColor,
                display: 'none',
                zIndex: '-10'
            })

            if (floatContainer.value) {
                floatContainer.value.appendChild(temp)
            }
            setTimeout(() => {
                temp.style.display = 'block'
                temp.style.opacity = '1'
                temp.style.transition = 'opacity 0.5s'
                setTimeout(() => {
                    temp.style.opacity = '0'
                    setTimeout(() => {
                        if (floatContainer.value) {
                            floatContainer.value.removeChild(temp)
                        }
                        // floatContainer.value.removeChild(temp)
                    }, 500)
                }, 500)
            }, 0)
        }, 50)
        run.value = true
    } else {
        buttonText.value = '不行，换一个'
        clearInterval(timer!)
        run.value = false
    }
}

const handleKeydown = (e: KeyboardEvent) => {
    if (e.key === 'Enter') {
        toggle()
    }
}

onMounted(() => {
    document.addEventListener('keydown', handleKeydown)
})

onBeforeUnmount(() => {
    document.removeEventListener('keydown', handleKeydown)
    if (timer) clearInterval(timer)
})

</script>

<style scoped lang="less">
.random {
    height: 100%;
    width: 100%;
    background-position: center;
    background-image: url("../assets/bg.png");
    overflow: hidden;
    display: flex;
    position: relative;
    flex-direction: column;

    .logo {
        margin: 0 auto;
        margin-top: 10px;
        width: 200px;
        height: 40px;
        background-color: #e9e9e9;

        img {
            width: 100%;
            height: 100%
        }
    }

    #wrapper {
        width: 500px;
        height: 80px;
        text-align: center;
        margin: auto;

        .button {
            background-color: rgba(0, 0, 0, .55);
            border: none;
        }
    }

    .float-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; // 确保不阻碍点击
        z-index: 1; // 比默认内容略高，但低于弹窗等
    }
}
</style>